import { Component, OnInit, TemplateRef } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ReuseTabService, SimpleTableColumn } from '@delon/abc';
import { OrderService } from '../order.service';
import { NzMessageService, NzModalService } from 'ng-zorro-antd';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'detail',
  templateUrl: './detail.component.html',
  styleUrls: ['./detail.component.css']
})
export class DetailComponent implements OnInit {

  constructor(private activatedRoute: ActivatedRoute,
    private reuseTabService: ReuseTabService,
    private orderService: OrderService,
    public msg: NzMessageService,
    private modalSrv: NzModalService,
    private fb: FormBuilder, ) { }

  detail: any;
  orderNu: string;

  data: any[] = [];
  loading = false;
  status = [
    { index: 0, text: '关闭', value: false, type: 'default', checked: false },
    {
      index: 1,
      text: '运行中',
      value: false,
      type: 'processing',
      checked: false,
    },
    { index: 2, text: '已上线', value: false, type: 'success', checked: false },
    { index: 3, text: '异常', value: false, type: 'error', checked: false },
  ];

  columns: SimpleTableColumn[] = [
    { title: '', index: 'key', type: 'checkbox' },
    { title: '名称', index: 'merchandiseName' },
    { title: '图片', index: 'logo', type: 'img'},
    { title: '单价', index: 'price' },
    { title: '数量', index: 'amount' },
    { title: '合计', index: 'sumPrice' },
    {
      title: '操作',
      buttons: [
        {
          text: '编辑',
          click: (item: any) => this.detail(item),
        },
      ],
    },
  ];

  form: FormGroup;
  expressCompanyList: any;

  ngOnInit() {
    console.clear();
    this.reuseTabService.title = "订单-详情";
    // this.reuseTabService.mode = 2;

    this.activatedRoute.queryParams.subscribe(params => {

      this.detail = JSON.parse(params["item"]);
      console.log(this.detail);
      this.orderNu = "单号: " + this.detail.id;
    });

    this.getData();

    this.form = this.fb.group({
      expressCompany: [null, [Validators.required]],
      expressNu: [null, [Validators.required]],
    });

    this.orderService.getValueListByParentCode("express").subscribe(resp => {
      if (resp.success)
        this.expressCompanyList = resp.data;
    })

  }

  getData() {
    this.loading = true;

    this.orderService.queryDetailByOrderId(this.detail.id).subscribe(resp => {
      this.loading = false;
      if (resp.success)
        this.data = resp.data;
      else
        this.data = [];

    }, error => {
      this.loading = false;
      this.msg.error("error: " + JSON.stringify(error));

    });

  }

  shipping(tpl: TemplateRef<{}>) {
    this.form.reset();

    this.modalSrv.create({
      // nzWidth: 640,
      nzMaskClosable: false,
      nzTitle: '发货',
      nzContent: tpl,
      nzOkText: "提交",
      nzOnOk: () => {
        for (const i in this.form.controls) {
          this.form.controls[i].markAsDirty();
          this.form.controls[i].updateValueAndValidity();
        }
        if (this.form.invalid) return false;

        this.form.value.orderId = this.detail.id
        
        this.loading = true;
        this.orderService.shipping(this.form.value).subscribe(resp => {
          this.loading = false;
          if (resp.success) {
            this.msg.success("操作成功");
          }
          else
            this.msg.error(resp.errorMsg);

        }, error => {
          this.loading = false;
          this.msg.error("异常: " + JSON.stringify(error));

        });

        return false;
      },
      nzCancelText: null
    });
  }

}
